<template>
  <!-- 社交消息列表页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_"> 交换名片请求 </view>
      <view class="right_"></view>
    </view>

    <view class="cardList_">
      <!-- 循环 -->
      <view class="item_card" v-for="(item, index) in newYouList" :key="index">
        <view class="title_" v-if="createTimeStrFun(item.createTimeStr, index)">
          {{ item.createTimeStr }}
        </view>
        <!-- 循环体 -->
        <view
          :class="[
            createTimeStrFun1(item.createTimeStr, index)
              ? 'card_content'
              : 'card_content card_content1',
          ]"
        >
          <!-- 每个末尾card_content1 -->
          <!-- 左边 -->
          <navigator
            :url="'/pages/index/personal?id=' + item.senderId"
            hover-class="none"
            class="content_left"
          >
            <image :src="item.avatarUrl" mode="aspectFill"></image>
            <image
              src="../../imges/various.png"
              mode="aspectFill"
              class="verified"
              v-if="item.verified"
            ></image>
          </navigator>
          <!-- 右边 -->
          <view
            :class="[
              createTimeStrFun1(item.createTimeStr, index)
                ? 'content_right content_right1'
                : 'content_right',
            ]"
          >
            <!-- content_right1 每个都加 末尾不加 -->

            <navigator
              :url="'/pages/index/personal?id=' + item.senderId"
              hover-class="none"
              class="one_"
            >
              <view class="top_"> 好友请求：{{ item.realName }} </view>
              <view class="bottom_">
                {{ item.company }} <text>{{ item.post }}</text> {{ item.city }}
              </view>
            </navigator>

            <view class="two_ content_Cao" v-if="item.dealResult == 0">
              <image
                src="../../images/aliang/newNoPass_.png"
                mode="aspectFill"
                @tap="handleNoJhCard(item.id)"
              ></image>
              <image
                src="../../images/aliang/newPass_.png"
                mode="aspectFill"
                @tap="handleJhCard(item.id)"
              ></image>
            </view>
            <view class="two_" v-if="item.dealResult == 1">
              <image
                src="../../images/aliang/newPassG.png"
                mode="aspectFill"
              ></image>
              <text>已通过</text>
            </view>
            <view class="two_ content_rightX" v-if="item.dealResult == 2">
              <image
                src="../../images/aliang/newPassX.png"
                mode="aspectFill"
              ></image>
              <text>已拒绝</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      pageSize: 10,
      bottom: false,
      noMore: false,
      newYouList: [],
      isShow: true,
    };
  },
  onLoad() {
    this.newYouOneList(); //请求列表
  },
  onPullDownRefresh() {
    this.pageSize = 10;
    this.bottom = false;
    setTimeout(() => {
      this.newYouOneList();
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
        icon: "none",
      });
    }, 1000);
  },
  onReachBottom() {
    if (!this.isShow) {
      return false;
    }
    uni.showLoading({
      title: "加载中",
    });
    this.pageSize = this.pageSize + 10;
    this.bottom = true;
    this.newYouOneList();
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    handleNoJhCard(id) {
      //拒绝交换名片
      this.bottom = false;
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/userCard/refuseExchangeCard",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.newYouOneList();
            uni.showToast({
              title: "操作成功",
              duration: 2000,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleJhCard(id) {
      //交换名片
      this.bottom = false;
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/userCard/agreeExchangeCard",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: id,
          },
        }).then((res) => {
          // console.log(res, '好友')
          if (res.data.code == 200) {
            this.newYouOneList();
            uni.showToast({
              title: "操作成功",
              duration: 2000,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    newYouOneList() {
      //新好友
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/social/list",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageNumber: 1,
            pageSize: this.pageSize,
          },
        }).then((res) => {
          // console.log(res, '好友')
          if (res.data.code == 200) {
            this.newYouList = res.data.data.rows;
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              !this.noMore &&
              this.newYouList.length >= res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 2000,
                icon: "none",
              });
              this.noMore = true;
              return false;
            }
            if (this.newYouList.length >= res.data.data.total && this.bottom) {
              uni.hideLoading();
              this.isShow = false;
              uni.showToast({
                title: "没有更多数据了",
                duration: 2000,
                icon: "none",
              });
            } else if (
              this.bottom &&
              this.newYouList.length < res.data.data.total
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 2000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
  computed: {
    createTimeStrFun() {
      let that = this;
      return function (item, index) {
        let isShow = "";
        if (index >= 1) {
          if (item != that.newYouList[index - 1].createTimeStr) {
            isShow = true;
          } else {
            isShow = false;
          }
        } else {
          isShow = true;
        }
        return isShow;
      };
    },
    createTimeStrFun1() {
      let that = this;
      return function (item, index) {
        let isShow = "";
        if (index < that.newYouList.length - 1) {
          if (item != that.newYouList[index + 1].createTimeStr) {
            isShow = false;
          } else {
            isShow = true;
          }
        } else {
          isShow = true;
        }
        return isShow;
      };
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-top: 92rpx;

  .cardList_ {
    padding: 0 36rpx;

    .item_card {
      // padding: ;
      .title_ {
        font-size: 28rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #666666;
        padding-bottom: 4rpx;
        padding-top: 36rpx;
      }

      .card_content {
        //主体内容
        margin-top: 28rpx;
        display: flex;
        justify-content: space-between;

        .content_left {
          flex-shrink: 0;
          width: 88rpx;
          height: 88rpx;
          border-radius: 4rpx;
          margin-right: 20rpx;
          position: relative;

          image {
            width: 100%;
            height: 100%;
          }
          .verified {
            position: absolute;
            width: 36rpx;
            height: 36rpx;
            bottom: -6rpx;
            right: -6rpx;
            z-index: 666;
          }
        }

        .content_right {
          flex: 1;
          display: flex;
          justify-content: space-between;

          .one_ {
            height: 85rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .top_ {
              max-width: 350rpx;
              font-size: 30rpx;
              font-family: PingFangSC, PingFangSC-Medium;
              font-weight: 500;
              color: #111111;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .bottom_ {
              max-width: 380rpx;
              font-size: 24rpx;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: #999999;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;

              text {
                margin: 0 18rpx;
              }
            }
          }

          .two_ {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #999999;
            margin-left: 20rpx;

            image {
              margin-right: 20rpx;
              width: 40rpx;
              height: 40rpx;
            }
          }

          .content_Cao {
            image {
              width: 64rpx;
              height: 64rpx;
              background: #ffffff;
              border-radius: 50%;
              margin-left: 24rpx;
              margin-right: 0;
            }

            image:first-child {
              margin-left: 0;
            }
          }

          .content_rightX {
            image {
              margin-right: 25rpx;
              width: 32rpx;
              height: 32rpx;
            }
          }
        }

        .content_right1 {
          padding-bottom: 36rpx;
          border-bottom: 1rpx solid #eee;
        }
      }

      .card_content1 {
        padding-bottom: 36rpx;
        border-bottom: 1rpx solid #eee;
      }
    }

    .item_card:first-child .title_ {
      padding-top: 24rpx;
    }
  }

  .top_tou {
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    z-index: 100;
    justify-content: space-between;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }
}
</style>
